<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="password_top">
      <view class="password">
        <input
          type="password"
          placeholder="输入原密码"
          v-model="oldpassword"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="password">
        <input
          type="password"
          placeholder="输入新密码"
          v-model="newpassword"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
      <view class="password">
        <input
          type="password"
          placeholder="确认新密码"
          v-model="newpasswords"
          style="font-size: 28rpx"
          placeholder-style="font-size: 28rpx;"
        />
      </view>
      <view
        style="height: 2rpx; background-color: #262934; margin: 0 30rpx"
      ></view>
    </view>
    <view class="password_center">
      <!-- <text>密码必须是8-16位英文字母、数字、组合（不能是纯数字）</text> -->
      <text>密码必须是6-16位</text>
      <text style="color: #1FE7E7; margin-top: 20rpx" @click="toforget"
        >忘记密码？</text
      >
    </view>
    <view class="button" @click="Submit()"> 确定 </view>
  </view>
</template>

<script>
import api from "../../api/api";
export default {
  data() {
    return {
      oldpassword: "",
      newpassword: "",
      newpasswords: "",
    };
  },
  methods: {
    toforget() {
      uni.navigateTo({
        url: "../forget_password/forget_password",
      });
    },
    async Submit() {
      if (this.oldpassword == "") {
        this.$refs.uToast.show({
          title: "请输入旧密码",
        });
        return;
      }
      if (this.newpassword == "") {
        this.$refs.uToast.show({
          title: "请输入新密码",
        });

        return;
      }
      if (this.newpassword.length < 6 || this.newpassword.length > 16) {
        this.$refs.uToast.show({
          title: "新密码需要6-16位",
        });
        return;
      }
      if (this.newpasswords == "") {
        this.$refs.uToast.show({
          title: "请确认新密码",
        });
        return;
      }

      // var filter = /^(?=.*[0-9\!@#\$%\^&\*])(?=.*[a-zA-Z]).{8,16}$/;
      // let blnTest = filter.test(this.newpassword);
      // if (!blnTest) {
      //   this.$refs.uToast.show({
      //     title: "密码格式错误",
      //   });
      //   return;
      // }
      if (this.oldpassword == this.newpassword) {
        this.$refs.uToast.show({
          title: "新密码和旧密码不能一致",
        });
        return;
      }
      let res = await api.changePassword({
        query: {
          old_password: this.oldpassword,
          password: this.newpassword,
          password_confirmation: this.newpasswords,
        },
        method: "post",
      });
      if (res.code == 0) {
        this.$refs.uToast.show({
          title: "修改成功",
          type: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1, //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
          });
        }, 500);
      } else {
        this.$refs.uToast.show({
          title: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  background-color: $bg-color1;
  min-height: 100vh;
}
.password_top {
  border: 2rpx solid #262934;
  // margin: 0 30rpx;
  background-color: $bg-color3;
  // border-radius: 25rpx;
  position: relative;
  top: 50rpx;
  font-size: 28rpx;
}
.password {
  /* display: flex;
		justify-content: space-between;
		align-items: center; */
  color: #ffffff;
  margin: 20rpx 30rpx;
  padding: 5rpx 0;
  /* min-height: 60rpx; */
}
.password_center {
  position: relative;
  top: 50rpx;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 30rpx;
  font-size: 28rpx;
}
.button {
  position: relative;
  top: 100rpx;
  margin: 30rpx;
  height: 90rpx;
  color: $text-color4;
  background: $button;background-repeat: no-repeat;background-size: 100%;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 16rpx;
}
</style>
